<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="修改个人信息" name="first">
        <el-form ref="myForm" :model="form" label-width="100px">
          <el-form-item label="头像" required prop="avatar">
            <UploadFile :fs="avatar" @success="v=>form.avatar=v" />
          </el-form-item>
          <el-form-item label="用户名" required prop="username">
            <el-input v-model="form.username" placeholder="用户名" />
          </el-form-item>
          <el-form-item label="姓名" required prop="name">
            <el-input v-model="form.name" placeholder="昵称" />
          </el-form-item>
          <el-form-item label="手机号码" required prop="phone">
            <el-input v-model="form.phone" placeholder="手机号码" />
          </el-form-item>
          <!-- <el-form-item label="旧密码">
        <el-input v-model="form.oldPwd" placeholder="旧密码(留空则不修改)" type="password" />
      </el-form-item>
      <el-form-item label="新密码">
        <el-input v-model="form.newPwd" placeholder="新密码(留空则不修改)" type="password" />
      </el-form-item>
      <el-form-item label="确认密码">
        <el-input v-model="form.confirmPwd" placeholder="确认密码(留空则不修改)" type="password" />
          </el-form-item>-->
          <el-form-item>
            <el-button type="primary" @click="handleSubmit">修改个人信息</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="修改密码" name="second">
        <el-form ref="myForm2" :model="form" label-width="100px">
          <el-form-item label="旧密码" required prop="oldPwd">
            <el-input v-model="form.oldPwd" placeholder="请输入旧密码" type="password" />
          </el-form-item>
          <el-form-item label="新密码" required prop="newPwd">
            <el-input v-model="form.newPwd" placeholder="请输入新密码" type="password" />
          </el-form-item>
          <el-form-item label="确认密码" required prop="confirmPwd">
            <el-input v-model="form.confirmPwd" placeholder="请输入确认密码" type="password" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSubmitPassword">修改密码</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import UploadFile from '@/components/UploadFile'
import { getUserProfile, updateProfile } from '@/api/user'

export default {
  components: {
    UploadFile
  },
  data() {
    return {
      form: {},
      avatar: [],
      activeName: 'first'
    }
  },
  created() {
    this.getProfile()
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },
    getProfile() {
      getUserProfile().then(res => {
        this.form = res.data
        this.avatar = [res.data.avatar]
      })
    },
    handleSubmit() {
      this.$refs['myForm'].validate(valid => {
        if (valid) {
          this.$confirm('确认修改个人信息吗？', '警告').then(() => {
            updateProfile(this.form).then(() => {
              this.$message.success('修改个人信息成功')
            })
          })
        }
      })
    },
    handleSubmitPassword() {
      this.$refs['myForm2'].validate(valid => {
        if (valid) {
          this.$confirm('确认修改密码吗？', '警告').then(() => {
            updateProfile(this.form).then(() => {
              this.$message.success('修改密码成功')
            })
          })
        }
      })
    }
  }
}
</script>

<style>
</style>
